<template>
    <div>
      <div class="srs">
        <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
				    <h1>学生服务</h1>
			  </div>
        <el-form ref="form" :model="user" :rules="rules" label-width="1px">
          <div class="left"><el-form-item v-for="(user,researchId) in userList" :key="researchId" prop="research">
            名次
            <el-input class="test2" v-model="user.rank" placeholder="输入名次"></el-input>
            时间
            <el-input class="test2" v-model="user.time" placeholder="输入时间"></el-input>
            地点
            <el-input class="test3" v-model="user.place" placeholder="输入地点"></el-input>
            奖项
            <el-input class="test3" v-model="user.prize"  placeholder="输入奖项"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="addModule()"
                >添加条目
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click="deleteModule()"
                >删除条目
              </el-button>
          </el-form-item>
        </div>
        <div >
          <el-form-item>
            <el-button type="primary" size="medium" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
        </el-form>
    </div>
</div>
  </template>
  
  <script>
  import { getInfo } from "@/api/login";
  import { updateSRSinfo } from "@/api/login";
  
  export default {
    name: "update",
    data() {
      return {
        userList:[],
            user: {
                username:"",
                researchId: "",
                rank: "",
                time: "",
                place:"",
                prize:""
        },
      }
    },
    mounted() {
    getInfo().then((res) => {
      this.user.username = res.data.username;
    });
  },
    methods: {
        addModule() {
        this.user = {};
        this.userList.push(this.user);
        },
        deleteModule(user) {
        var index = this.userList.indexOf(user); //找到对应图标的下标 
        this.userList.splice(this.userList.length - 1, 1);
        }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            //发起网络请求登录，如果登录成功，跳转到主页面
            //操作与login api联系
            updateSRSinfo(this.user.username,this.user.researchId,this.user.rank,this.user.time,this.user.place,this.user.prize).then(res =>{
              console.log(res.data.accessToken)
              setToken(res.data.accessToken)
            }).catch(() => {
              // 上传，显示错误提示
              this.loading = true
            })
          }
        })
    },
  };
  </script>
  
  <style>
  .update {
    padding: 20px;
  }

  .head{
    margin-left: 10px;
  }

  .test2{
    width: 100px !important;
  }

  .test3{
    width: 150px !important;
  }

  .left{
    text-align: left;
    margin-left: 100px;
    margin-right: 50px;
  }

  .right{
  text-align: right;
  margin-right: 100px;
}

  </style>